<template>
  <view class="mine-page">
    <!-- 顶部标题（匹配文档原型“我的”标题） -->
    <view class="nav-title">我的</view>

    <!-- 未登录状态：登录按钮+功能入口禁用提示 -->
    <view class="unlogin-section" v-if="!isLogin">
      <!-- 登录按钮（核心交互） -->
      <view class="login-btn-wrap">
        <button class="login-btn" @click="goToLogin">登录</button>
      </view>
      <!-- 功能入口（未登录时灰显，提示登录） -->
      <view class="func-list">
        <view class="func-item disabled">
          <uni-icons type="collect" size="28" color="#ccc"></uni-icons>
          <text>我的收藏</text>
        </view>
        <view class="func-item disabled">
          <uni-icons type="history" size="28" color="#ccc"></uni-icons>
          <text>浏览历史</text>
        </view>
        <view class="func-item disabled">
          <uni-icons type="setting" size="28" color="#ccc"></uni-icons>
          <text>设置</text>
        </view>
      </view>
    </view>

    <!-- 已登录状态：用户信息+完整功能入口（文档原型样式） -->
    <view class="login-section" v-else>
      <!-- 用户信息区 -->
      <view class="user-info">
        <image :src="userInfo.avatar || 'static/icon/avatar-default.png'" class="avatar"></image>
        <view class="user-meta">
          <view class="username">{{userInfo.username}}</view>
          <view class="user-stats">关注{{userInfo.followCount || 3}} · 话题{{userInfo.topicCount || 0}}</view>
        </view>
      </view>
      <!-- 功能入口（可点击，匹配文档“收藏/历史/设置”需求） -->
      <view class="func-list">
        <view class="func-item" @click="goToCollect">
          <uni-icons type="collect" size="28" color="#D0021B"></uni-icons>
          <text>我的收藏</text>
          <uni-icons type="right" size="24" color="#999"></uni-icons>
        </view>
        <view class="func-item" @click="goToHistory">
          <uni-icons type="history" size="28" color="#D0021B"></uni-icons>
          <text>浏览历史</text>
          <uni-icons type="right" size="24" color="#999"></uni-icons>
        </view>
        <view class="func-item" @click="goToSetting">
          <uni-icons type="setting" size="28" color="#D0021B"></uni-icons>
          <text>设置</text>
          <uni-icons type="right" size="24" color="#999"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      userInfo: {} // 存储用户信息（头像、用户名、关注数等）
    };
  },
  onShow() {
    // 关键：每次显示页面都检查登录状态（文档Tips1需求）
    this.checkLoginStatus();
  },
  methods: {
    // 检查登录状态（读取本地缓存，更新tab文字）
    checkLoginStatus() {
      const userInfo = uni.getStorageSync('userInfo');
      if (userInfo && userInfo.token) {
        this.isLogin = true;
        this.userInfo = userInfo;
        // 登录后修改底部tab文字为“我的”（文档Tips1核心代码）
        uni.setTabBarItem({
          index: 3,
          text: '我的',
          selectedIconPath: 'static/icon/mine-active.png' // 可选：切换登录后图标
        });
      } else {
        this.isLogin = false;
        // 未登录时恢复tab文字为“未登录”
        uni.setTabBarItem({
          index: 3,
          text: '未登录',
          selectedIconPath: 'static/icon/mine-unsel.png'
        });
      }
    },

    // 跳转到登录页（路径严格匹配pages/login/login，增加失败处理）
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login',
        fail: (err) => {
          // 跳转失败提示+错误日志（便于排查问题）
          uni.showToast({ title: '跳转登录页失败，请检查路径', icon: 'none', duration: 2000 });
          console.error('登录页跳转失败原因：', err);
        }
      });
    },

    // 已登录功能：跳转收藏页（文档3.6“我的收藏”需求）
    goToCollect() {
      uni.navigateTo({ url: '/pages/mine/collect' });
    },

    // 已登录功能：跳转历史页
    goToHistory() {
      uni.navigateTo({ url: '/pages/mine/history' });
    },

    // 已登录功能：跳转设置页
    goToSetting() {
      uni.navigateTo({ url: '/pages/mine/setting' });
    }
  }
};
</script>

<style scoped>
/* 页面基础样式 */
.mine-page {
  min-height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
}

/* 顶部标题（匹配文档原型居中样式） */
.nav-title {
  text-align: center;
  font-size: 36rpx;
  color: #333;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  font-weight: 500;
}

/* 未登录状态样式 */
.unlogin-section {
  padding: 40rpx 30rpx;
}
.login-btn-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 60rpx;
}
.login-btn {
  width: 60%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #D0021B; /* 文档原型红色主题 */
  color: #fff;
  font-size: 32rpx;
  border-radius: 60rpx;
}
/* 未登录功能入口（灰显禁用） */
.func-list {
  display: flex;
  flex-direction: column;
  gap: 1rpx;
}
.func-item {
  display: flex;
  align-items: center;
  padding: 25rpx 20rpx;
  background-color: #fff;
  gap: 20rpx;
}
.func-item.disabled {
  color: #ccc;
  background-color: #fafafa;
}

/* 已登录状态样式 */
.login-section {
  padding: 30rpx 30rpx;
}
/* 用户信息区（文档原型布局） */
.user-info {
  display: flex;
  align-items: center;
  gap: 25rpx;
  padding: 20rpx 0 40rpx;
  border-bottom: 1rpx solid #f5f5f5;
  margin-bottom: 20rpx;
}
.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 2rpx solid #f0f0f0;
}
.user-meta {
  flex: 1;
}
.username {
  font-size: 34rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: 500;
}
.user-stats {
  font-size: 26rpx;
  color: #999;
}
/* 已登录功能入口（带右箭头，可点击） */
.func-item uni-icons:last-child {
  margin-left: auto;
}
</style>